<template>
  <div class="">
    实例化vuex<br />
    store的属性：插值表达式--{{ $store.state.name }} <br />
    插值表达式--{{ $store.state.count }}
    <p>计算属性优化--{{ name }}和{{ count }}</p>
    <p>辅助函数优化--{{ name }}和{{ count }}</p>
    <br />
    {{ count }}
    <!-- <button @click="$store.commit('addOne', 18)">加一</button> -->
    <button @click="asyncAddOne(1)">定时+1</button>
    <br />
    getters属性 -- {{ $store.getters.filterList }} <br />
    getters属性-计算函数优化 -- {{ $store.getters.filterList }}
    {{ $store.getters.userInfo }} <br />
    模块化-- 用户token -- {{ $store.state.users.token }} <br />
    模块化-- 网站名称 -- {{ $store.state.setting.name }}
    <hr />
    模块化-计算属性优化-- 用户token -- {{ $store.state.users.token }} <br />
    模块化-计算属性优化-- 网站名称 -- {{ $store.state.setting.name }}<br />
    <!-- <button @click="$store.commit('updateToken')">修改token1</button> -->
    <!-- 开启命名空间之后要加上模块名的路径 -->
    <!-- <button @click="$store.commit('users/updateToken')">修改token1</button> -->
    <button @click="updateToken">修改token1</button>
  </div>
</template>

<script>
// 1、引入辅助函数
import {
  mapState,
  mapMutations,
  mapActions,
  mapGetters,
  createNamespacedHelpers,
} from "vuex";
// 只需要在调用时，传入模块名，就可以得到基于命名空间的辅助函数
// 这里解构了 mapMutations, 上面import from 就不用再引入
// const { mapMutations} = createNamespacedHelpers("users");
// 解构重命名
const { mapMutations: ModulesmapMutations } = createNamespacedHelpers("users");
export default {
  mounted() {
    // console.log(this.$store);
  },
  computed: {
    name() {
      return this.$store.state.name;
    },
    count() {
      return this.$store.state.count;
    },

    // 2、使用辅助函数
    // 采用数组形式引入state属性
    // 传入数组指定需要映射的字段
    // 将结果用...延展运算符将导出的状态映射给计算属性
    ...mapState(["count", "name"]),
    filterList() {
      return this.$store.getters.filterList;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
    ...mapGetters(["userInfo", "token", "name"]),
  },
  methods: {
    // addOne(data) {
    //   this.$store.commit("addOne", data);
    // },
    // 常用
    ...mapMutations(["addOne"]),

    asyncAddOne(data) {
      this.$store.dispatch("asyncAddOne", data);
    },
    ...mapActions(["asyncAddOne"]),

    // ...mapMutations(["updateToken"]),
    ...ModulesmapMutations(["updateToken"]),
    // updateToken() {
    //   // 先拿到属性路径再调用这个方法
    //   this["users/updateToken"]();
    // },
  },
};
</script>

<style>
</style>